<%@ Page Language="C#" %>
<%@ Import Namespace="BusLib" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Navigate</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=.492&amp;sensor=false&amp;key=ABQIAAAA0AuyIOhCAnL9MOeOP1aKwRSf8xm5yYv0JxQnScVem-6GxDSR-hRhD8ZzokbFwBW-oA8z1u4gmUSiQA"></script>
    <script type="text/javascript">
        _mSvgForced = true;
        _mSvgEnabled = true;

        var map;
        
        function createStepMarker(doing, start_lat, start_lon, start_time, end_time, trip) {
            var marker = new GMarker(new GLatLng(start_lat, start_lon));
            var helpText = "";

            if (trip == 0) 
            {
                helpText = "<b>" + doing + "</b><br/>"
                    + "Start time: " + start_time + "<br/>"
                    + "End time: " + end_time + "<br/>";
            }
            else 
            {
                var routeNum = GXml.value(trip.getElementsByTagName("route_num")[0]);
                var headsign = GXml.value(trip.getElementsByTagName("headsign")[0]);
                var trip_id = trip.getAttribute("id");
                
                helpText = "<b>" + doing + " " + routeNum + " - " + headsign + "</b><br/>"
                    + "Start time: " + start_time + "<br/>"
                    + "End time: " + end_time + "<br/>"
                    + "Trip # " + trip_id;
            }
            
            GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(helpText);
            });
            map.addOverlay(marker);
            return marker;
        }

        function createStopMarker(stop) {
            var lat = parseFloat(GXml.value(stop.getElementsByTagName("lat")[0]));
            var lon = parseFloat(GXml.value(stop.getElementsByTagName("lon")[0]));

            var marker = new GMarker(new GLatLng(lat, lon));
            GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml("foo");
            });
            map.addOverlay(marker);
            return marker;
        }

        function refresh() {
            var url = "NavigateXml.aspx";

            GDownloadUrl(url, function(data, responseCode) {
                var xml = GXml.parse(data);
                var steps = xml.documentElement.getElementsByTagName("step");

                for (var i = 0; i < steps.length; i++) {
                    var doing = steps[i].getAttribute("mode");

                    var startPt = steps[i].getElementsByTagName("start_pt")[0];
                    var endPt = steps[i].getElementsByTagName("end_pt")[0];
                    var start_lat = parseFloat(GXml.value(startPt.getElementsByTagName("lat")[0]));
                    var start_lon = parseFloat(GXml.value(startPt.getElementsByTagName("lon")[0]));
                    var end_lat = parseFloat(GXml.value(endPt.getElementsByTagName("lat")[0]));
                    var end_lon = parseFloat(GXml.value(endPt.getElementsByTagName("lon")[0]));

                    var trips = steps[i].getElementsByTagName("trip");
                    var trip = 0;
                    if (trips.length > 0)
                        trip = trips[0];

                    createStepMarker(steps[i].getAttribute("mode"),
                        start_lat,
                        start_lon,
                        startPt.getAttribute("time"),
                        endPt.getAttribute("time"),
                        trip
                        );

                    var shape = steps[i].getElementsByTagName("shape")[0];
                    var points = shape.getElementsByTagName("point");

                    var gpoints = new Array();

                    for (var j = 0; j < points.length; j++) {
                        var lat = parseFloat(GXml.value(points[j].getElementsByTagName("lat")[0]));
                        var lon = parseFloat(GXml.value(points[j].getElementsByTagName("lon")[0]));

                        gpoints.push(new GLatLng(lat, lon));

                        // Highlight the shape pt
//                        map.addOverlay(new GMarker(new GLatLng(lat, lon)));
                    }

                    if (doing == "Riding") {
                        var polyLine = new GPolyline(gpoints, "#0000FF", 5);
                        map.addOverlay(polyLine);
                    } else if (doing == "Walking") {
                        var polyLine = new GPolyline(gpoints, "#ff0000", 5);
                        map.addOverlay(polyLine);
                    }

                }
            })
        }

        function initialize() {
            if (GBrowserIsCompatible()) {            
                map = new GMap2(document.getElementById("map_canvas"));
                map.addControl(new GLargeMapControl());
                map.addControl(new GMapTypeControl());
                map.setCenter(new GLatLng(47.6686609659264,-122.371513513894), 12);

                refresh();
            }
        }
    </script>
    </head>
<body onload="initialize()" onunload="GUnload()" >
    <form id="form1" runat="Server">
    <button onclick="refresh()">Refresh</button>
    <div id="map_canvas" style="width: 1000px; height: 600px"></div>
    <br />
&nbsp;</form>
</body>
</html> 